<template>
  <div id="Main-learning-map">
    <ul class="lx-zon">
      <li>
        <dl>
          <dt id="cStu">C/C++学习路线图<span>(对c这块也不熟,有什么好的建议可以<a href="#lxw">联系我</a>)</span></dt>
          <dd>
            <ul>
              <li>
                <div class="java" v-on:click="cyyjc">C语言入门</div>
                <cyuyan :a="C_YU_YAN.c1"></cyuyan>
              </li>
              <li>
                <div class="java" v-on:click="cpp">C++</div>
                <cpp :a="C_YU_YAN.cpp"></cpp>
              </li>
              <li>
                <div class="java" @click="cyysj">c/c++数据结构和算法</div>
                <c-sjjg :a="C_YU_YAN.csj"></c-sjjg>
              </li>
            </ul>
          </dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt id="javaStu">java开发学习路线图</dt>
          <dd>
            <ul>
              <li>
                <div class="java" v-on:click="javaseHandle">JAVASE</div>
                <java1 :a="JAVA.JavaSEisShow"></java1>
              </li>
              <li>
                <div class="java" @click="javaeeHandle">JAVAEE</div>
                <java2 :a="JAVA.JavaEEisShow"></java2>
              </li>
              <li>
                <div class="java" v-on:click="javaWebFrameworkHandle">web框架</div>
                <java3 :a="JAVA.WebFrameworkIsShow"></java3>
              </li>
              <li>
                <div class="java" @click="javaFBSHandle">分布式</div>
                <java4 :a="JAVA.FBS"></java4>
              </li>
              <li>
                <div class="java" @click="javaWFWHandle">微服务</div>
                <java5 v-bind:a="JAVA.WFW"></java5>
              </li>
              <li v-show="false">
                <div class="java" v-on:click="javaOtherHandle">其他部分</div>
                <java6 :a="JAVA.other"></java6>
              </li>
            </ul>
          </dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt id="pythonStu">python开发学习路线图</dt>
          <dd>
            <ul>
              <li>
                <div class="python" v-on:click="py1">python基础</div>
                <python1 :a="PYTHON.p1"></python1>
              </li>
              <li>
                <div class="python" v-on:click="py2">python进阶</div>
                <python2 :a="PYTHON.p2"></python2>
              </li>
              <li>
                <div class="python" v-on:click="py3">python-web框架</div>
                <python3 :a="PYTHON.p3"></python3>
              </li>
              <li>
                <div class="python" v-on:click="py4">python-网络爬虫</div>
                <python4 :a="PYTHON.p4"></python4>
              </li>
              <li>
                <div class="python" v-on:click="py5">web自动化测试</div>
                <python5 :a="PYTHON.p5"></python5>
              </li>
              <li>
                <div class="python" v-on:click="py6">数据分析基础</div>
                <python6 :a="PYTHON.p6"></python6>
              </li>
              <li>
                <div class="python" v-on:click="py7">机器学习</div>
                <python7 :a="PYTHON.p7"></python7>
              </li>
              <li v-show="false">
                <div class="python" v-on:click="py8">其他部分</div>
                <python8 :a="PYTHON.p8"></python8>
              </li>
            </ul>
          </dd>
        </dl>
      </li>
      <li>
        <a name="webqd"></a>
        <dl>
          <dt id="webFondStu">前端开发学习路线图 <span>(个人建议,如果不是主搞前端开发,vue和其他不搞)</span></dt>
          <dd>
            <ul>
              <li>
                <div class="web-qd" v-on:click="web1">HTML</div>
                <web1 :a="WEB_FONT.w1"></web1>
              </li>
              <li>
                <div class="web-qd" v-on:click="web2">CSS</div>
                <web2 :a="WEB_FONT.w2"></web2>
              </li>
              <li>
                <div class="web-qd" @click="web3">JAVASCRIPT</div>
                <web3 :a="WEB_FONT.w3"></web3>
              </li>
              <li>
                <div class="web-qd" @click="web4">JQuery</div>
                <web4 :a="WEB_FONT.w4"></web4>
              </li>
              <li>
                <div class="web-qd" @click="web5">Bootstrap</div>
                <web5 :a="WEB_FONT.w5"></web5>
              </li>
              <li>
                <div class="web-qd" @click="web6">Vue.js</div>
                <web6 :a="WEB_FONT.w6"></web6>
              </li>
              <li>
                <div class="web-qd" @click="web7">其他部分</div>
                <web7 :a="WEB_FONT.w7"></web7>
              </li>
            </ul>
          </dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt id="for-exam">针对计算机考试学习</dt>
          <dd>
            <ul>
              <li>
                <div class="exam" v-on:click="exNcre">NCRE</div>
                <ncre :a="EXAM.ncre"></ncre>
              </li>
              <li>
                <div class="exam">NIT</div>
              </li>
              <li>
                <div class="exam">软考</div>
              </li>
            </ul>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</template>

<script>
import Java1 from '@/components/main-part/primary-service/learning-map/java/java1'
import Java2 from '@/components/main-part/primary-service/learning-map/java/java2'
import Java3 from '@/components/main-part/primary-service/learning-map/java/java3'
import Java4 from '@/components/main-part/primary-service/learning-map/java/java4'
import Java5 from '@/components/main-part/primary-service/learning-map/java/java5'
import Java6 from '@/components/main-part/primary-service/learning-map/java/java6'
import Python1 from '@/components/main-part/primary-service/learning-map/python/python1'
import Python2 from '@/components/main-part/primary-service/learning-map/python/python2'
import Python3 from '@/components/main-part/primary-service/learning-map/python/python3'
import Python4 from '@/components/main-part/primary-service/learning-map/python/python4'
import Python5 from '@/components/main-part/primary-service/learning-map/python/python5'
import Python6 from '@/components/main-part/primary-service/learning-map/python/python6'
import Python7 from '@/components/main-part/primary-service/learning-map/python/python7'
import Python8 from '@/components/main-part/primary-service/learning-map/python/python8'
import Web1 from '@/components/main-part/primary-service/learning-map/web-qd/web1'
import Web2 from '@/components/main-part/primary-service/learning-map/web-qd/web2'
import Web3 from '@/components/main-part/primary-service/learning-map/web-qd/web3'
import Web4 from '@/components/main-part/primary-service/learning-map/web-qd/web4'
import Web5 from '@/components/main-part/primary-service/learning-map/web-qd/web5'
import Web6 from '@/components/main-part/primary-service/learning-map/web-qd/web6'
import Web7 from '@/components/main-part/primary-service/learning-map/web-qd/web7'
import Ncre from '@/components/main-part/primary-service/learning-map/for-exam/ncre'
import Cyuyan from '@/components/main-part/primary-service/learning-map/cyy/cyuyan'
import CSjjg from '@/components/main-part/primary-service/learning-map/cyy/c-sjjg'
import Cpp from '@/components/main-part/primary-service/learning-map/cyy/cpp'

export default {
  name: 'Main-learning-map',
  data () {
    return {
      JAVA: {
        JavaSEisShow: false,
        JavaEEisShow: false,
        WebFrameworkIsShow: false,
        FBS: false,
        WFW: false,
        other: false
      },
      PYTHON: {
        p1: false,
        p2: false,
        p3: false,
        p4: false,
        p5: false,
        p6: false,
        p7: false,
        p8: false
      },
      WEB_FONT: {
        w1: false,
        w2: false,
        w3: false,
        w4: false,
        w5: false,
        w6: false,
        w7: false
      },
      EXAM: {
        ncre: false,
        Nit: false,
        rk: false
      },
      C_YU_YAN: {
        c1: false,
        cpp: false,
        csj: false
      }
    }
  },
  components: {
    Cpp,
    CSjjg,
    Cyuyan,
    Ncre,
    Web7,
    Web6,
    Web5,
    Web4,
    Web3,
    Web2,
    Web1,
    Python8,
    Python7,
    Python6,
    Python5,
    Python4,
    Python3,
    Python2,
    Python1,
    Java6,
    Java5,
    Java4,
    Java3,
    Java2,
    Java1
  },
  methods: {
    javaseHandle () {
      this.JAVA.JavaSEisShow = !this.JAVA.JavaSEisShow
    },
    javaeeHandle () {
      this.JAVA.JavaEEisShow = !this.JAVA.JavaEEisShow
    },
    javaWebFrameworkHandle () {
      this.JAVA.WebFrameworkIsShow = !this.JAVA.WebFrameworkIsShow
    },
    javaFBSHandle () {
      this.JAVA.FBS = !this.JAVA.FBS
    },
    javaWFWHandle () {
      this.JAVA.WFW = !this.JAVA.WFW
    },
    javaOtherHandle () {
      this.JAVA.other = !this.JAVA.other
    },
    py1 () {
      this.PYTHON.p1 = !this.PYTHON.p1
    },
    py2 () {
      this.PYTHON.p2 = !this.PYTHON.p2
    },
    py3 () {
      this.PYTHON.p3 = !this.PYTHON.p3
    },
    py4 () {
      this.PYTHON.p4 = !this.PYTHON.p4
    },
    py5 () {
      this.PYTHON.p5 = !this.PYTHON.p5
    },
    py6 () {
      this.PYTHON.p6 = !this.PYTHON.p6
    },
    py7 () {
      this.PYTHON.p7 = !this.PYTHON.p7
    },
    py8 () {
      this.PYTHON.p8 = !this.PYTHON.p8
    },
    web1 () {
      this.WEB_FONT.w1 = !this.WEB_FONT.w1
    },
    web2 () {
      this.WEB_FONT.w2 = !this.WEB_FONT.w2
    },
    web3 () {
      this.WEB_FONT.w3 = !this.WEB_FONT.w3
    },
    web4 () {
      this.WEB_FONT.w4 = !this.WEB_FONT.w4
    },
    web5 () {
      this.WEB_FONT.w5 = !this.WEB_FONT.w5
    },
    web6 () {
      this.WEB_FONT.w6 = !this.WEB_FONT.w6
    },
    web7 () {
      this.WEB_FONT.w7 = !this.WEB_FONT.w7
    },
    exNcre () {
      this.EXAM.ncre = !this.EXAM.ncre
    },
    exNit () {
      this.EXAM.Nit = !this.EXAM.Nit
    },
    exRk () {
      this.EXAM.rk = !this.EXAM.rk
    },
    cyyjc () {
      this.C_YU_YAN.c1 = !this.C_YU_YAN.c1
    },
    cpp () {
      this.C_YU_YAN.cpp = !this.C_YU_YAN.cpp
    },
    cyysj () {
      this.C_YU_YAN.csj = !this.C_YU_YAN.csj
    }
  }
}
</script>

<style scoped lang="scss">
.lx-zon {
  list-style: none;
  padding: 0;
  margin: 0;

  dt {
    font-size: 30px;
    text-align: center;

    span {
      font-size: 0.5em;
      color: #f66530;
      a{
        text-decoration:none;
        &:hover{
          color:goldenrod;
        }
      }
    }
  }

  dd {
    margin: 2em 0;

    ul {
      list-style: none;
      padding: 0;

      li {
        margin-bottom: 1em;

        div:first-child {
          $width: 15em;
          $hei: 2.5em;
          width: $width;
          font-size: 20px;
          text-align: center;
          margin: 0 auto;
          height: $hei;
          line-height: $hei;
          border: #D9FFFF 2px solid;
          border-radius: 12px;
          transition: 0.5s;
          user-select: none;

          &:hover {
            border: #91efeb 2px solid;
            border-radius: 12px;
            box-shadow: 2px 2px 10px #91efeb;
            background-color: #91efeb;
            color: white;
            transform: translate(0.5em, 0.5em);
          }
        }
      }

    }
  }
}
</style>
